<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>

    <!--  vue中有两种绑定数据的方法：
    单向绑定：v-bind 数据只能从data流向页面
    双向绑定：v-model 数据可以从data流向页面 也可以从页面流向data

    双向绑定一般应用在表单类元素上，如 input select 等
    v-model：value 可以简写为v-model 因为v-model默认收集的就是value值 -->


    <div id="root">
        <!-- 绑定数据v-bind<input type="text" v-bind:value="name"> -->
        绑定数据v-bind<input type="text" :value="name">
        <br>
        <!-- 这里是v-bind和v-model的区别 -->
        <!-- 绑定数据v-bind<input type="text" v-model:value="name"> -->
        绑定数据v-model<input type="text" v-model="name">
        <!-- 这两种方式都分别有简写形式 -->


        <!-- 这样写是错误的 因为v-model只能应用在表单类元素上 输入类元素 -->
        <!-- 因为v-model一般是绑定value值，而其它标签没有value属性 -->
        <!-- <h3 v-model:x="name"></h3> -->

    </div>

    <script>
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data: {
                name: '万州区'
            }
        })


    </script>
</body>

</html>